<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干饭最快乐</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <header>
        <h1>干饭最快乐</h1>
    </header>
    <div class="menu-container">
        <form class="add-menu-form" action="/add_menu" method="post" enctype="multipart/form-data">
            <input type="text" name="name" placeholder="菜单名称" required>
            <input type="file" name="image" accept="image/*" required>
            <textarea name="recipe" placeholder="菜谱" required></textarea>
            <input type="number" step="0.01" name="price" placeholder="价格" required>
            <button type="submit">添加菜单</button>
        </form>
        {% for menu in menus %}
        <div class="menu-item">
            <h3>{{ menu[1] }}</h3>
            <a href="/menu/{{ menu[0] }}">
                <img src="{{ menu[2] }}" alt="{{ menu[1] }}">
            </a>
            <p>价格: {{ menu[4] }}</p>
            <a href="/menu/{{ menu[0] }}">查看详情</a>
            <button onclick="showEditForm({{ menu[0] }})">编辑</button>
            <button onclick="deleteMenu({{ menu[0] }})">删除</button>
            <form action="/order_menu/{{ menu[0] }}" method="post" style="display:inline;">
                <button type="button" onclick="orderMenu({{ menu[0] }})">点餐</button>
            </form>
            <form class="edit-menu-form" id="edit-form-{{ menu[0] }}" action="/edit_menu" method="post" enctype="multipart/form-data" style="display:none;">
                <input type="hidden" name="id" value="{{ menu[0] }}">
                <input type="text" name="name" placeholder="菜单名称" value="{{ menu[1] }}" required>
                <input type="file" name="image" accept="image/*">
                <textarea name="recipe" placeholder="菜谱" required>{{ menu[3] }}</textarea>
                <input type="number" step="0.01" name="price" placeholder="价格" value="{{ menu[4] }}" required>
                <button type="submit">保存更改</button>
            </form>
        </div>
        {% endfor %}
        
        <script src="/static/scripts.js"></script>
    </div>
    <footer>
        <nav>
            <a href="/">首页</a>
            <a href="/ordered_menus">已点餐</a>
        </nav>
    </footer>
</body>
</html>